<template>
  <div class="blogs">
    <div class="header">
      <div class="searchcard">
        <h2>搜索论坛</h2>
        <div class="searchinput"><el-input v-model="searchtitle" placeholder="输入论坛关键字进行搜索" clearable />
            <el-button color="#545c64"  @click="getforuDate" >搜索</el-button></div>
        
    </div>
    </div>

    <ul class="list">
      <li
        v-for="item in tableData"
        :key="item.id"
        
        class="item"
      >
        <div class="content" @click="godetail(item.id)">
          <h5 class="title">{{ item.title }}</h5>
          <p class="description">{{ item.content }}</p>
          <div class="meta">
            <el-row>
              <el-col :span="8">
                <el-tooltip content="阅读量" placement="top" effect="light">
                  <span
                    ><el-icon><View /></el-icon> {{ item.clicknum }}</span
                  >
                </el-tooltip>
                <el-tooltip content="评论量" placement="top" effect="light">
                  <span
                    ><el-icon><ChatDotSquare /></el-icon>
                    {{ item.commenton }}</span
                  ></el-tooltip
                >
                </el-col
              >
              <el-col :span="8"></el-col>
              <el-col :span="8">
                <!-- <span>{{ item.user.name }}</span> -->
                <span>{{  new Date(item.createTime).toLocaleString()}}</span></el-col
              >
            </el-row>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <!--分页-->
  <div style="padding: 10px 20px; margin-left: 30px">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:currentPage="pageNum"
      :page-sizes="[15, 30, 50]"
      v-model:page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Forumcenter",
  data() {
    return {
      tableData: [],
      total: 0, //数据总条数
      pageNum: 1, //当前页
      pageSize: 10, //页大小
      searchuserid: "", //搜索证号
      searchtitle: "", //搜索名称
      form: {},
    };
  },
  computed: {},
  methods: {
    // 查看
    godetail(id) {
      // console.log(id);
      this.$router.push({
        name: "forumcenterdetail",
        query: {
          forumid: id,
        },
      });
    },
    handleSizeChange(val) {
      //页大小改变
      this.pageSize = val;
      this.getforuDate();
    },
    handleCurrentChange(val) {
      //当前页改变
      this.pageNum = val;
      this.getforuDate();
    },
    //分页查询
    getforuDate() {
      this.$http
        .get("/inoculations/forum/pageall", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            userid: this.searchuserid,
            title: this.searchtitle,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            
            this.total = res.data.total;
            this.tableData = res.data.records;
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    
  },
  mounted() {},
  created() {
    this.getforuDate();
  },
};
</script>

<style scoped>
.blogs {
  /*左对齐*/
  margin: 58px;
  margin-top: 88px;
  padding: 15px;
  box-shadow: 7px 15px 40px #dfe3e3;
}

.header {
  width: 100%;
  height: 200px;
}

li {
  /*去除起前面的点*/
  list-style-type: none;
  /*内部间距*/
  padding: 15px 0 10px;
  /*每篇下面的实线*/
  border-bottom: 2px solid #f0f0f0;
}
/*标题，鼠标，悬浮，变灰色*/
li:hover .title {
  color: #87CEFA;
}
/**/
.searchcard {
    height: 200px;
    width: 100%;
    text-align: center;
    /* background-image: linear-gradient(to right, #928dab, #00d2ff , #928dab ); */
    background-image: linear-gradient(60deg, #928dab 15%,  #2cacd1 25%,#87A7D9 37%, #928dab 60%);
}
.searchcard h2 {
    color: white;
    line-height: 70px;
    margin-bottom: 20px;
}
.el-input {
    width: 65%;
    margin-right: 10px;
    height: 36px;
}
.el-button {
    font-size: 13px;
    width: 80px;
    height: 36px;
}
.description {
  min-height: 30px;
  margin: 4px 0 4px;
  font-size: 14px;
  color: #555;
}
.meta {
  font-size: 13px;
  line-height: 20px;
}
span {
  margin-right: 12px;
  color: #666;
}
.title {
  color: #333;
  margin: 7px 0 7px;
  font-size: 20px;
  line-height: 1.5;
}
</style>
